<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js"></script>
</head>

<body> <!-- includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false
                两个值
                第一个是是否存在
                 fromIndex 可选
                 开始搜索的索引（从零开始）-->

    <!-- 多出了不必要的标签 -->
    <!-- <li  v-for="i in dates"  >
             <div v-if="i.includes(value)">{{i}}</div>
            </li> -->
    <div class="div">
        <input type="text" v-model="values">
        <ul>
            <template v-for="i in dates">
                <li>{{i}}</li>
            </template>
        </ul>
    </div>
    <script>
        const obj = {
            data() {
                return {
                    values: '胡歌',
                    dates: ['胡歌吃饭', '彭于晏边吃饭边演戏', '胡歌边看电视边吃饭', '我看见胡歌和彭于晏了', '我和彭于晏一起合照', '胡歌和彭于晏在演仙剑', '仙剑奇侠传'],
                    dates1: ['胡歌吃饭', '彭于晏边吃饭边演戏', '胡歌边看电视边吃饭', '我看见胡歌和彭于晏了', '我和彭于晏一起合照', '胡歌和彭于晏在演仙剑', '仙剑奇侠传']

                }
            },
            watch: {
                // 简单写法

                // value 新值 olve老值(一般不用)
                // values(value, olve) {
                //     clearTimeout(this.clock)

                //     this.clock = setTimeout(() => {
                //         this.dates = this.dates1.filter(item => item.includes(this.values))
                //         console.log(value);
                //     }, 300)
                // },

                // 完整写法
                values: {
                    deep: true,//深度监听
                    immediate: true,//是否立即执行一次 handler()
                    handler(value) {
                        clearTimeout(this.clock)
                        this.clock = setTimeout(() => {
                            this.dates = this.dates1.filter(item => item.includes(this.values))
                            console.log(value);
                        }, 300)
                    }
                }
            },
            computed: {
                // cvalues() {
                //     // 第一次this.value 表示空字符串，任何字符串都包含空字符串所以为true
                //     return this.dates.filter(item => item.includes(this.values))
                // }
            },
            methods: {
                // values() {
                //     // 第一次this.value 表示空字符串，任何字符串都包含空字符串所以为true
                //     return this.dates.filter(item => item.includes(this.value))
                // }
            }
        }
        Vue.createApp(obj).mount('.div')
    </script>
</body>

</html>